User blog:Ebbit1q/New Portable Infoboxes
UPDATE: The changes are already live! We have ''convert''ed ''from our old infoboxes to the new portable infoboxes. There are many advantages to these new infoboxes, most importantly that they are easier to manage and that they are compatible with mobile devices. The new infoboxes are a lot easier to create, the code used is more compact and easier to understand, also the style settings are no longer included in each infobox but are derived from a central position allowing us to change the way the infoboxes look without needing to change every template. The old infoboxes looked weird on mobile and oddly proportioned, this will be fixed with the new infoboxes. comparison: Adding Infoboxes There are hardly any differences between how the new infoboxes are implemented to articles. The new infoboxes will also be able to be added by selecting add infobox in the default text editor instead of needing to select add template and search for infobox. In the source editor the code to implement will remain the same, also this will mean that no articles will need to be edited for the upgrade. The new infoboxes also support multiple images, see the guide here. The new boxes no longer allow setting the text color, articles that have this changed in their infobox will have the field be ignored, this should not harm any articles as this feature was completely unused. This is how the infoboxes are read on an article: Creating Infoboxes The new language uses is different from the old one in many ways, Wikia can create a draft copying most of the fields but it's far from complete. Here is a comparison between the old code and the new one: Old language snippet: ! colspan="2" | Political and social information |- ! Affiliation | '' } Same snippet in new language: Political and social information Affiliation Unknown As you can see html tags between angle brackets(<>) are used everywhere now and it's a lot easier to read. Also the style info has disappeared from the code, it has been moved to a central location and isn't needed anymore. Tags Here is a short list of tags and their usage: Used to indicate the start of infobox code. Used to implement an image, the X between quotes("") will be the name of the field. Sets the image caption with field X, can only be used inside image tags. Sets default value of any field, can only be used inside tag that use a source parameter. Sets title with field X, default should be set to . Declares a group, groups are used to group fields and allow all fields and the header to be set to invisible. Sets header. Declares an information field with source X, needs label tag. Sets the name of the info field's label, used inside data tags. Allows you to change how the info field is displayed, only use this if you know what you're doing. Don't forget to close all your tags like normal in html: converting infoboxes To convert an infobox click create draft on the original template's page, this will create a draft with roughly the same content as the old template. The draft generation has a few flaws and the code doesn't look like it should yet. As an example we'll be converting the example infobox, the example infobox has one image, one imagecaption, one title, one header and three fields named field 1 to 3. The draft will likely look like this: text_color imagecaption Unknown field 1Unknown field 2Unknown field 3Unknown How this box should look: None.jpg Header name Field 1 Unknown Field 2 Unknown Field 3 Unknown Note: a noinclude tag is also generated: this tag is used for the documentation, just leave it and the information inside, it'll be referred to later in this guide. To convert the best and fastest practice is to: Click create draft and immediately publish with comment "generated draft" so the draft is saved in the edit history, then select edit. Copy the example piece of code and place it under the generated code, then copy the information inside of the source quotes("") from the generated code.(generated code is no longer needed after this but it can serve as an example of the data field order) ! source names need to remain the same for the article infoboxes to be read! ! changing them will mess up all articles using the infobox! Copy the segment with group tags for each header in the infobox and copy the segments with data tags for each info field inside of the group tags with the same header, look at the old infobox for which data field belongs to which header. ! check if the indentations match the example, this makes reading the code easier! Copy the default image name and place it in between the default tags that are inside the image tags, it'll replace the "None.jpg that is entered in this example. ! some infoboxes have no default image, remove the default tags in this case! Lastly copy all headers and info field labels, headers are placed inside the header tags replacing "Header name", field labels are placed in between the label tags inside the data tags replacing "Field n". The new infobox draft is now finished and the auto-generated infobox code should be removed, as soon as all the drafts are ready the drafts will replace the old infoboxes and they'll be shown on the articles. Publish with comment "converted infobox". Writing Documentation The documentation is generated inside these tags: The documentation shows people how the infobox can be used. To maintain uniformity all infobox drafts should be given the same layout in documentation: Usage To use this template on an article copy this: Sample For example enter this: to see this: Click here to refresh the preview above The automatically generated documentation should be replaced with this, to do this the best practice is to: Copy the example documentation and place it under the generated one. Copy the first generated code snippet that shows all the fields empty and place it between the first set of pre tags replacing . Copy the infobox source code from a popular page that uses this infobox already and place it replacing between the second set of pre tags and after "to see this:", then place /Draft after it's infobox name so it'll use the draft and not the old template. ! there should be no space between the and the tags! Remove auto-generated documentation and publish with comment "formatted documentation". Styling Infoboxes only admins can do this The new infoboxes are styled in the Wikia.css this can only be edited by staff. WIP Resources A list of helpful links I used: *http://robocraft-rp.wikia.com/wiki/Help:PortableInfoboxes *http://robocraft-rp.wikia.com/wiki/Help:PortableInfoboxes/Tags *http://robocraft-rp.wikia.com/wiki/Help:Infoboxes/CSS *http://dev.wikia.com/wiki/Portable_infoboxes/Tips_and_tricks *http://fanz-of-lucy-worsley.wikia.com/wiki/The_Styling_of_a_PortableInfobox/Multi_Themed_CSS Here is a generated list of the infoboxes we need ported: *http://robocraft-rp.wikia.com/wiki/Special:Insights/nonportableinfoboxes Category:Blog posts